import React, { Component } from "react";
import {
  Layout,
  Icon,
  Breadcrumb,
  Row,
  Col,
  Tag,
  Tooltip,
  Menu,
  Dropdown
} from "antd";
import { Link } from "react-router-dom";
import { RouteWithSubRoutes } from "../../router";
import SiderBar from "../../components/Sider";
import "./index.less";
import { MyIcon } from "../../utils";

const { Header, Sider, Content } = Layout;

class DashboardIndex extends Component {
  state = {
    collapsed: false,
    isFull: false
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  triggerFull = () => {
    this.setState({
      isFull: !this.state.isFull
    });
  };

  fullScreen = () => {
    this.triggerFull();
    var el = document.documentElement;
    var rfs =
      el.requestFullScreen ||
      el.webkitRequestFullScreen ||
      el.mozRequestFullScreen ||
      el.msRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
      rfs.call(el);
    }
  };

  exitFullScreen = () => {
    this.triggerFull();
    var el = document;
    var cfs =
      el.cancelFullScreen ||
      el.webkitCancelFullScreen ||
      el.mozCancelFullScreen ||
      el.exitFullScreen;
    if (typeof cfs != "undefined" && cfs) {
      cfs.call(el);
    }
  };

  render() {
    const { routes } = this.props;
    const menu = (
      <Menu>
        <Menu.Item key="0" disabled>
          存誉集团
        </Menu.Item>
        <Menu.Divider />
        <Menu.Item>
          <Link to="/dashboard/rule.index">个人中心</Link>
        </Menu.Item>
        <Menu.Item>
          <Link to="/">退出登录</Link>
        </Menu.Item>
      </Menu>
    );

    return (
      <Layout
        style={{ minHeight: "100vh" }}
        id="components-layout-demo-custom-trigger"
      >
        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <SiderBar />
        </Sider>
        <Layout>
          <Header style={{ background: "#fff", padding: 0, width: "100%" }}>
            <Row
              style={{ padding: 0, margin: 0, width: "100%", height: "100%" }}
            >
              <Col span={1}>
                <Icon
                  className="trigger"
                  type={this.state.collapsed ? "menu-unfold" : "menu-fold"}
                  onClick={this.toggle}
                />
              </Col>
              <Col
                span={17}
                style={{
                  display: "flex",
                  alignItems: "center",
                  height: "100%"
                }}
              >
                <Breadcrumb>
                  <Breadcrumb.Item href="">首页</Breadcrumb.Item>
                  <Breadcrumb.Item href="">
                    <Icon type="user" />
                    <span>Application List</span>
                  </Breadcrumb.Item>
                  <Breadcrumb.Item>Application</Breadcrumb.Item>
                </Breadcrumb>
              </Col>
              <Col span={4}>
                <Col
                  span={18}
                  style={{
                    display: "flex",
                    height: "100%",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <div>
                    <Tag color="gold">$ 账户余额: 8311.63 金币</Tag>
                  </div>
                </Col>
                <Col
                  span={3}
                  style={{
                    display: "flex",
                    height: "100%",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <div>
                    <MyIcon type="icon-xiaoxi" style={{ fontSize: 16 }} />
                  </div>
                </Col>
                <Col
                  span={3}
                  style={{
                    display: "flex",
                    height: "100%",
                    alignItems: "center",
                    justifyContent: "center"
                  }}
                >
                  <div>
                    {!this.state.isFull ? (
                      <Tooltip placement="bottom" title="全屏">
                        <Icon
                          type="fullscreen"
                          style={{ cursor: "pointer" }}
                          onClick={this.fullScreen}
                        />
                      </Tooltip>
                    ) : (
                      <Tooltip placement="bottom" title="退出全屏">
                        <Icon
                          type="fullscreen-exit"
                          style={{ cursor: "pointer" }}
                          onClick={this.exitFullScreen}
                        />
                      </Tooltip>
                    )}
                  </div>
                </Col>
              </Col>
              <Col span={2}>
                <Tag color="blue">超级管理员</Tag>
                <Dropdown overlay={menu}>
                  <Icon type="down" />
                </Dropdown>
              </Col>
            </Row>
          </Header>

          <Content
            style={{
              margin: "10px 10px",
              background: "#fff",
              minHeight: 280
            }}
          >
            {routes &&
              routes.map((route, i) => (
                <RouteWithSubRoutes key={i} {...route} />
              ))}
          </Content>
        </Layout>
      </Layout>
    );
  }
}

export default DashboardIndex;
